<script setup>
import { toRefs } from 'vue';
import DictSelect from "@/components/CommonSelect/DictSelect.vue";
import { Search } from '@element-plus/icons-vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {
      return {}
    }
  }
});

const { form } = toRefs(props);

const emit = defineEmits(['sub']);

function sub() {
  emit('sub');
}

function reset() {

  form.value.state = null;
  form.value.value = "";
}
</script>

<template>
  <el-form style="display: flex;">
    <dict-select v-model="form.state" dict-type="asset_state"
                 style="width: 120px; height: 32px; margin: 8px 0px 0px 8px;" placeholder="全部状态" @change="sub"></dict-select>
    <el-input v-model="form.value" style="max-width: 220px; height: 32px; margin: 8px 0px 0px 8px;"
              placeholder="请输入">
      <template #append>
        <el-button :icon="Search" @click="sub" />
      </template>
    </el-input>
    <input type="reset" value="重置" class="reset" @click.prevent="reset" />
  </el-form>
</template>

<style scoped lang="scss">
.reset {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  color: #0b1019;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  padding: 0 12px;
  margin: 8px 0px 0px 8px;
}

.reset:hover {
  background-color: #d8d9da;
}
</style>